<template>
  <view class="tp-swiper" :style="{height: height + 'px'}">
    <uni-swiper-dot 
      class="uni-swiper-dot-box" 
      @clickItem="clickItem"
      :info="images"
      mode="round" :current="current"
      :dots-styles="dotStyles">
      <swiper class="swiper-box" 
        @change="change" 
        :current="swiperDotIndex" 
        :autoplay="autoplay" 
        :interval="2000"
        :duration="500"
        :style="{height: height + 'px'}">
        <swiper-item v-for="(img, idx) in images" :key="idx">
          <view
            class="swiper-item"
            :style="{height: height + 'px', 'background-image': 'url(' + img.src + ')','background-size': '100% auto','background-repeat': 'no-repeat','background-position': '0 15%'}"
            @click="imageClick(idx)"></view>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>
  </view>
</template>

<script>
  export default {
    name: "tp-swiper",
    emits: ["imgClick"],
    props: {
      images: Array,
      autoplay: {
        type: Boolean,
        default: true
      },
      height: {
        type: Number,
        default: 200
      }
    },
    data() {
      return {
        current: 0,
        swiperDotIndex: 0,
        dotStyles: {
          backgroundColor: 'rgba(255,144,0, 0.3)',
          border: '1px rgba(255,144,0, 0.3) solid',
          color: '#fff',
          selectedBackgroundColor: 'rgba(255,144,0, 0.9)',
          selectedBorder: '1px rgba(255,144,0, 0.9) solid'
        }
      };
    },
    methods: {
      change(e) {
        this.current = e.detail.current
      },
      clickItem(e) {
        this.swiperDotIndex = e
      },
      imageClick(idx) {
        //console.log(this.images[idx])
        this.$emit('imgClick', this.images[idx])
      }
    }
  }
</script>

<style lang="scss">
  @import "@/styles/_var.scss";

  .tp-swiper {
    width: 100%;

    // .swiper-box {
    //   height: 200px;
    // }
  }

  .swiper-item {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    color: #fff;
  }
</style>